<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        *{padding: 0;margin: 0;}
        
        p {
            height: 40px;
            line-height: 40px;
            border: 1px dashed #333;
        }

    </style>
</head>
<body>
    <div id="app">

        <!-- 静态属性 (属性值是定死的) -->
        <!-- html属性 写在标签<>内 对标签的说名  (属性名="属性") -->
        <!-- <p id="demo" class="one" title="hello" data-index="0" ></p> -->


        <!-- v-bind 属性绑定 (动态属性, 属性值可以改变,数据改变,属性也会更新) -->
        <button @click="changeData">change</button>
        <!-- <p  v-bind:id="idName" v-bind:class="className" v-bind:title="titleMsg" v-bind:data-index="count">01 </p> -->
        <p  :id="idName" :class="className" :title="titleMsg" :data-index="count">01 </p>
        <br>
        <br>
        <br>

        <button @click="delData">删除属性</button>
        <!-- <p  v-bind:id="a" v-bind:class="b">02</p> -->
        <p  :id="a" :class="b">02</p>
        
        <br>
        <br>
        <br>
        
        <!-- <p  v-bind:data-str="str" v-bind:data-num="num" v-bind:data-bool="bool" v-bind:data-list="list" v-bind:data-obj="obj">03</p> -->
        <p  :data-str="str" :data-num="num" :data-bool="bool" :data-list="list" :data-obj="obj">03</p>
    </div>
</body>
<script>

    /* 
        v-bind 属性绑定, 将data中挂载的数据,作为html属性的属性值 (作为属性名也可以!)

            语法:
            v-bind:参数="指令值"
                参数:需要绑定的属性名
                指令值:  需要绑定的属性值(javascript表达式 变量  方法 三目运算符)

            注意:
                1.  如果v-bind的指令的值是null和undefined, 对应属性不会绑定到元素上
                2.  v-bind将data中挂载的数据,作为html属性的属性值 (如果指令的值不是字符串类型, 会隐式转化为字符串(xxx.toString()))

            
        v-bind简写:
            v-bind可以省略不写,从:开始写  如果v-bind:id="xxx"  => :id="xxx"
              
    
    */

    var vm = new Vue({
        el:"#app",
        data:{
            idName:"demo",
            className:"one",
            titleMsg:"hello world",
            count:100,

            a:"demo",
            b:"one",


            str:"hello",
            num:100,
            bool:true,
            list:[1,2,3,4],
            obj:{a:1,b:2,c:3},

        },
        methods: {
            changeData(){
                this.idName="DEMO"
                this.className="ONE"
                this.titleMsg = "HELLO WORLD";
                this.count = "001"
            },
            delData(){
                // this.a = "";
                // this.b = "";

                this.a = null;
                this.b = undefined;
            }
        }
    })

</script>
</html>